<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慧题通-练习题目</title>
</head>
<body>
<el-menu
        id="menu"
        default-active="3"
        class="el-menu-vertical-demo"
        style="width: 135px;float: left;height: 100vh"
>
    <el-menu-item index="0" @click="toMain">
        <i class="el-icon-help"></i>
        <span slot="title">主页</span>
    </el-menu-item>
    <el-menu-item index="1" @click="toMyQuestion">
        <i class="el-icon-location"></i>
        <span slot="title">我的题目</span>
    </el-menu-item>
    <el-menu-item index="2" @click="toAllQuestion">
        <i class="el-icon-menu"></i>
        <span slot="title">全站题目</span>
    </el-menu-item>
    <el-menu-item index="3">
        <i class="el-icon-setting"></i>
        <span slot="title">练习题目</span>
    </el-menu-item>
    <el-menu-item index="4" @click="toAddQuestion">
        <i class="el-icon-document"></i>
        <span slot="title">添加题目</span>
    </el-menu-item>
</el-menu>
<div id="app" v-loading="loading">
    <el-row type="flex" justify="center" align="middle" style="height:100%">
        <el-col style="width:800px;">
            <el-card>
                <el-form ref="form" :model="questionMethod" label-width="60px" :label-position="'right'"
                         v-if="!doing">
                    <p style="text-align: center;margin: 5px">设置练习方式</p>
                    <el-form-item label="题型">
                        <el-checkbox-group v-model="questionMethod.checkboxQuestions">
                            <el-checkbox-button v-for="(kind,index) in questionKinds" :label="index" :key="kind">
                                {{kind}}
                            </el-checkbox-button>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="分类">
                        <el-select v-model="questionMethod.categoryIds"
                                   multiple
                                   placeholder="请选择分类"
                                   style="width: 100%">
                            <el-option
                                    v-for="item in categories"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="方式">
                        <el-select v-model="questionMethod.validateMethod"
                                   clearable
                                   placeholder="请选择答案验证方式"
                                   style="width: 600px">
                            <el-option
                                    v-for="item in validateMethods"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-row type="flex" justify="center" align="middle">
                        <el-button type="primary" @click="start">开始练习</el-button>
                    </el-row>
                </el-form>

                <el-form v-if="doing" ref="form" label-width="80px" :label-position="'right'">
                    <el-form-item :label="(currentIdx+1)+'.'">
                        <span style="white-space: pre-wrap;">{{currentQuestion}}</span>
                    </el-form-item>
                    <!--如果是选择题，展示选项-->
                    <template v-for="(choice, index) in currentChoices" v-if="currentQuestionKind === 0">
                        <el-form-item :label="options[index]">
                            <el-card
                                    shadow="hover"
                                    body-style="padding: 0px;margin: 0px;margin-left: 10px"
                                    @click.native="selectChoice(index)"
                                    :style="{ borderColor: cardBorderColor[index] }"
                                    style="width: 600px;">
                                <p style="white-space: pre-wrap; padding: 0;margin: 0">{{choice}}</p>
                            </el-card>
                        </el-form-item>
                    </template>

                    <!--如果是填空题，设置填空-->
                    <template v-for="(blank, index) in currentBlanks" v-if="currentQuestionKind === 1">
                        <el-form-item :label="'第'+(index+1)+'空'">
                            <el-input v-model="currentBlanks[index]"
                                      placeholder="请输入答案"
                                      :disabled="finished || currentValidated"></el-input>
                        </el-form-item>
                    </template>

                    <!--如果是判斷題，展示选项-->
                    <template v-if="currentQuestionKind === 2">
                        <el-form-item>
                            <el-radio :disabled="finished || currentValidated" v-model="currentMyAnswer" label="对">对
                            </el-radio>
                        </el-form-item>
                        <el-form-item>
                            <el-radio :disabled="finished || currentValidated" v-model="currentMyAnswer" label="错">错
                            </el-radio>
                        </el-form-item>
                    </template>

                    <!--如果是解答题，展示输入框-->
                    <el-form-item v-if="currentQuestionKind === 3">
                        <el-input
                                :disabled="finished || currentValidated"
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 20}"
                                placeholder="请输入您的答案"
                                v-model="currentMyAnswer"
                                style="width: 600px">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="我的答案" v-if="currentValidated">
                        <span style="white-space: pre-wrap;">{{currentMyAnswer}}</span>
                        <span style="white-space: pre-wrap;">{{currentResult}}</span>
                    </el-form-item>

                    <el-form-item label="正确答案" v-if="currentValidated">
                        <span style="white-space: pre-wrap;">{{currentCorrectAnswer}}</span>
                    </el-form-item>

                    <el-row type="flex" justify="center" align="middle">
                        <el-button type="primary" @click="validateNow"
                                   v-if="isValidateNow && !currentValidated">确认答案
                        </el-button>
                    </el-row>
                    <el-row type="flex" justify="center" align="middle">
                        <el-button type="primary" @click="validateAll"
                                   v-if="!isValidateNow && isLastQuestion() && !finished">提交答案
                        </el-button>
                    </el-row>
                    <el-row type="flex" justify="center" align="middle">
                        <el-button type="primary" @click="doAgain()"
                                   v-if="(!isValidateNow && isLastQuestion() && finished)
                                   || (isValidateNow && currentValidated && isLastQuestion())">
                            重新练习
                        </el-button>
                    </el-row>

                    <el-row align="middle" justify="space-between" width="800">
                        <el-col :span="4" style="float: left">
                            <el-button icon="el-icon-back" round :disabled="isFirstQuestion()" @click="prevQuestion">
                                上一题
                            </el-button>
                        </el-col>
                        <el-col :span="4" style="float: right">
                            <el-button round :disabled="isLastQuestion()" @click="nextQuestion">
                                下一题<i class="el-icon-right el-icon--right"></i>
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
    <el-row type="flex" justify="center" align="middle" style="height:100%">
        <el-col style="width:800px;">
            <el-form v-loading="loadingGetNotes"
                     v-if="doing && ((!isValidateNow && finished) || (isValidateNow && currentValidated))">
                <el-form-item label="笔记">
                    <el-button type="text" @click="showAddNote">添加笔记</el-button>
                    <el-card
                            v-loading="loadingAddNote"
                            v-if="showAddNoteCard"
                            shadow="hover"
                            body-style="padding: 0px; margin: 5px;margin-left: 10px;margin-right: 10px;"
                            style="margin-bottom: 10px;">
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 3, maxRows: 15}"
                                v-model="note.content"
                                placeholder="请输入笔记内容"
                                clearable
                                style="margin-bottom: 10px"></el-input>
                        公开<el-switch v-model="note.open"></el-switch>
                        <el-button type="primary" @click="addNote" style="float: right;">确认添加</el-button>
                    </el-card>
                    <el-card
                            v-for="(note, index) in allNotes[currentIdx]"
                            shadow="hover"
                            body-style="padding: 0px; margin: 0px;margin-left: 10px;"
                            style="margin-bottom: 10px;">
                        <el-row>
                            <span style="white-space: pre-wrap; padding: 0">{{note.content}}</span>
                        </el-row>
                        <el-divider></el-divider>
                        <el-col :span="10" style="float: left">
                            <span style="color: #909399">{{note.nickname}} 最后修改于 {{note.time}}</span>
                            <span style="color: #909399" v-if="note.creator == userInfo.id">({{openStatus[note.open]}})</span>
                        </el-col>
                        <el-col :span="2" style="float: right">
                            <el-button v-if="note.creator == userInfo.id" type="text" @click="editNote(note)">修改
                            </el-button>
                        </el-col>
                    </el-card>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

    <!--编辑笔记对话框-->
    <el-dialog title="编辑笔记" :visible.sync="updatingNote" v-loading="loadingEditNote">
        <el-form :model="updateNote" label-position="right" label-width="80px" style="width: 100%">
            <el-form-item label="内容">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 15}"
                        v-model="updateNote.content"
                        shadow="hover"
                        body-style="padding: 0px;margin: 0px;margin-left: 10px;">
                </el-input>
            </el-form-item>
            <el-form-item label="公开">
                <el-switch v-model="updateNote.open"
                           active-value="1"
                           inactive-value="0">
                </el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelEditNote">取 消</el-button>
            <el-button type="primary" @click="finishEditNote">确 定</el-button>
        </div>
    </el-dialog>

    <!--悬浮按钮：重新练习-->
    <el-button
            v-if="doing"
            type="primary" size="medium" circle icon="el-icon-refresh-right"
            style="position: fixed; right: 50px; bottom: 50px;"
            @click="doAgain()">
    </el-button>

    <!--<div style="display: grid;
           grid-template-columns: repeat(3, 1fr);
           grid-gap: 5px;
           padding: 5px;
           width: 100px;
           position: fixed;
           right: 100px;
           top: 10px;">
        <el-button
            v-for="(item, index) in 10"
            :key="index"
            type="plain"
            size="medium"
            style="width: 50%; height: auto; display: flex; align-items: center; justify-content: center"
        >
            {{item}}
        </el-button>
    </div>-->
</div>
</body>

<script src="../../js/vue.js"></script>
<script src="../../js/axios-0.18.0.js"></script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script src="../../plugins/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css">

<script src="../../js/common.js"></script>
<script src="../../js/do_question.js"></script>
<script src="../../js/menu.js"></script>

<link rel="stylesheet" href="../../css/common.css">
</html>